<template>
	<view class="profile-wrapper">
		<block-view padding-top="0" padding-left="0">
			<view class="profile-item">
				<view class="item-title">头像</view>
				<view class="item-right">
					<button class="btn avatar-btn" open-type="chooseAvatar" @chooseavatar="chooseAvatar">
						<image class="avatar-img" :src="userStore.userInfo.avatar || '/static/images/logo.png'" mode="aspectFill"></image>
					</button>
					<uni-icons type="right" :size="18" color="#999"></uni-icons>
				</view>
			</view>
			<view class="profile-item">
				<view class="item-title">用户名</view>
				<view class="item-right">
					<input class="ipt" type="nickname" v-model="userStore.userInfo.name" @focus="iptFocus" @blur="iptBlur"/>
				</view>
			</view>
			<view class="profile-item">
				<view class="item-title">性别</view>
				<view class="item-right" @click="$popupChange(this, 'dataPicker', 'open')">
					<input class="ipt" type="text" placeholder="未填写" disabled :value="sexName" />
					<uni-icons type="right" :size="18" color="#999"></uni-icons>
				</view>
			</view>
			<view class="profile-item">
				<view class="item-title">手机</view>
				<view class="item-right">
					<input class="ipt" type="text" disabled :value="mobile" />
					<uni-icons type="right" :size="18" color="#999"></uni-icons>
				</view>
			</view>
			<view class="profile-item" @click="bindX5j">
				<view class="item-title">绑定西五街账号</view>
				<view class="item-right">
					<view class="bind-text" :class="{'theme-color': userStore.userInfo.x5j_id > 0}">{{ userStore.userInfo.x5j_id > 0 ? '已绑定' : '未绑定' }}</view>
					<uni-icons type="right" :size="18" color="#999"></uni-icons>
				</view>
			</view>
		</block-view>
		
		
		<view class="log-out" @click="logout">退出登录</view>
	</view>
	
	<uni-popup ref="dataPicker" type="bottom" :safe-area="false">
		<data-picker :data="sexData" mode="single" disabled-over-date @confirm="pickerConfirm" @cancel="$popupChange(this, 'dataPicker')"></data-picker>
	</uni-popup>
	
	<modal ref="modal"></modal>
</template>

<script>
	import { useUserStore } from '../../store/userStore';
	export default {
		data() {
			return {
				userStore: useUserStore(),
				sexData: ['未知', '男', '女'],
				oldName: ''
			}
		},
		computed: {
			mobile() {
				const phone = this.userStore.userInfo.phone
				if (phone) {
					return phone?.substring(0,3) + '****' + phone?.substring(7,11)
				} else {
					return ''
				}
			},
			sexName() {
				return this.sexData[this.userStore.userInfo.sex]
			}
		},
		methods: {
			async bindX5j() {
				if (this.userStore.userInfo?.x5j_id > 0) {
					return
				}
				this.$refs.modal.show({
					title: '提示',
					content: '绑定西五街账号会同步账号相关信息到See Wow,是否绑定?',
					confirmText: '绑定',
					success: async (result) => {
						if (result.confirm) {
							const res = await this.$request.post('/api/user/blind_x5j')
							console.log(res);
							if (res.code == 200) {
								uni.showToast({
									title: '绑定成功',
									icon: 'success'
								})
								setTimeout(() => {
									this.userStore.getUserInfo()
								}, 300)
							} else {
								uni.showToast({
									title: '绑定失败',
									icon: 'none'
								})
							}
						}
					}
				})
			},
			logout() {
				this.$refs.modal.show({
					title: '提示',
					content: '是否要退出登录？',
					success: async (btnRes) => {
						if (btnRes.confirm) {
							const res = await this.$request.post('/api/user/logout')
							if (res.code == 200) {
								uni.showToast({
									title: '已退出登录',
									icon: 'none'
								})
								const history_user = uni.getStorageSync('history-user');
								uni.clearStorageSync();
								uni.setStorageSync('history-user', history_user)
								this.userStore.userInfo = {}
								setTimeout(() => {
									uni.navigateBack()
								}, 1000)
							}
						}
					}
				})
			},
			async chooseAvatar(e) {
				// console.log(e.detail);
				const { avatarUrl } = e.detail
				const res = await this.$request.upload('/api/file/upload', {
					filePath: avatarUrl
				}, {
					load: false,
				})
				const { url } = res.data
				if (res.code == 200) {
					const result = await this.$request.post('/api/user/update', {avatar: url})
					if (result.code == 200) {
						uni.showToast({
							title: '更新成功',
							icon: 'none'
						})
						this.userStore.userInfo.avatar = url
						uni.setStorageSync('userInfo', this.userStore.userInfo)
					}
				}
			},
			async iptBlur(e) {
				// console.log(e)
				if (e.detail.value == this.oldName) {
					return
				}
				const res = await this.$request.post('/api/user/update', {name: this.userStore.userInfo.name})
				if (res.code == 200) {
					uni.showToast({
						title: '更新成功',
						icon: 'none'
					})
					uni.setStorageSync('userInfo', this.userStore.userInfo)
				}
			},
			iptFocus(e) {
				 this.oldName = e.detail.value
			},
			async pickerConfirm(e) {
				const res = await this.$request.post('/api/user/update', {sex: e.area_id})
				if (res.code == 200) {
					uni.showToast({
						title: '更新成功',
						icon: 'none'
					})
					this.userStore.userInfo.sex = e.area_id
					uni.setStorageSync('userInfo', this.userStore.userInfo)
				}
				this.$refs.dataPicker.close()
			},
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
<style scoped lang="scss">
	.profile-wrapper {
		// padding: 24rpx;
	}
	.profile-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 24rpx;
		// background-color: #fff;
		
		.item-title {
			font-size: 30rpx;
		}
		.item-right {
			display: flex;
			align-items: center;
			.avatar-btn {
				background-color: transparent;
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0;
				margin-right: 12rpx;
			}
			.ipt {
				text-align: right;
				padding-right: 12rpx;
			}
			.avatar-img {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				border: 1px solid #e5e5e5;
			}
			.bind-text {
				color: #999;
			}
			.theme-color {
				color: $uni-color-primary;
			}
		}
	}
	.log-out {
		font-size: 32rpx;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 190rpx;
		text-align: center;
		color: $uni-color-primary;
		font-weight: 400;
		text-decoration: underline;
	}
</style>